<template>
    <div class="jcbox">
      <div>
        <img :src="info.expertise" alt="">
      </div>
      <div class="info">
        <h3 class="title">{{info.title}}</h3>
     <!--   <p class="auth">作者：{{info.auther}}</p> -->
<p class="adv"><br>
美利兹英语口语强化营:英语轻松学，张口就能说。</p>
        <div class="price">
            <a style="font-size:10px;color:black;">限时优惠:</a> {{info.price/100}}元
                <div style="margin-top:0.1rem">            
            <a style="font-size:10px;color:black;">
            <img style="width:.4rem;heigth:.4rem;" src="../../static/images/yunfei.png" alt="">
            教材包邮</a>
            <a style="font-size:10px;color:black;">
            <img style="width:.4rem;heigth:.4rem;" src="../../static/images/xieyi.png" alt="">
            签订协议</a>
            <a style="font-size:10px;color:black;">
            <img style="width:.4rem;heigth:.4rem;" src="../../static/images/baozhang.png" alt="">
            保障服务</a>
            <a style="font-size:10px;color:black;">
            <img style="width:.4rem;heigth:.4rem;" src="../../static/images/xiaoguo.png" alt="">
            保证效果</a>
</div>
        </div>
      </div>
      <div class="intro">
 <h2> &nbsp;&nbsp;详细课程介绍：
<a class="mulu" @click="$router.push({path:'/contentlist',query:{'id':info.id,'is_mine':false}})" >
<img style="width:.4rem;heigth:.4rem;" src="../../static/images/mulu.png" alt="">&nbsp;查看目录 &nbsp;&nbsp;&nbsp;</a>
</h2>
<div v-html='info.intro' class="con"></div>
      </div>
      <div class="fixbox">
        <a class="buybox" @click="$router.push({path: '/order', query: {id: info.id, type: 1}})">立即购买</a>
      </div>
    </div>
</template>
<script>
import * as info from '../api/info'
export default {
  name: 'jiaocai',
  data () {
    return {
      id: 1,
      info: {}
    }
  },
  methods: {
    getJiaoCaiDetail (id) {
      info.getCourse_info(id)
        .then(res => {
          console.log('jiaocai:', res.data)
          this.info = res.data
        })
    }

  },
  mounted () {
    console.log(this.$route.query.id)
    if (this.$route.query.id) {
      this.id = this.$route.query.id
    }
    this.getJiaoCaiDetail(this.id)
  }
}
</script>

<style scoped>
.jcbox{
  padding-bottom: 1.2rem;
}
.pic img{
  display: block;
  width: 100%;
}
.info{
  #border-top: .3rem solid #f1f1f1;
  padding: 0 .3rem;
  padding-bottom: .3rem;
}
.info .title{
  line-height: 1rem;
  color: #333;
  font-size: .42rem;
  font-weight: bold;
}
.info .price{
  font-size: .44rem;
  color: #f00;
  font-weight: bold;
  margin-top:.4rem;
}
.intro{
  font-size: .35rem;
  line-height: .56rem;
}
.intro .tit{
  padding: 0 .3rem;
  height: 1rem;
  line-height: 1rem;
  background: #f1f1f1;
  padding-left: .3rem;
  font-size: .38rem;
  color: #333;
}
.intro p{
  padding: .3rem;
  font-size: .36rem;
  line-height: .56rem;

}
.fixbox{
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1.2rem;
  background: #f1f1f1;
  line-height: 1.2rem;
  text-align: center;
  padding-top: .1rem;
}
.buybox{
  height: 1.2rem;
  line-height: 1.2rem;
  width: 100%;
  text-align: center;
  font-size: .42rem;
  background: #0959c8;
  color: #fff;
  margin: 0 auto;
  display: block;
}
.video{
  border: 1px solid #e1e1e1;
  border-top: .26rem solid #e1e1e1;
  border-bottom: .26rem solid #e1e1e1;
}
.mulu{
float:right;
color:red;
}
.con{
 padding-top: .3rem;
}
.adv{
 color:black;
  font-size: .36rem;
}

</style>
